<Html>
    <head>
        <title>在template元素上使用过v-if进行条件渲染</title>
    </head>
    <body>
        <script>
             // ★ v-if
                             
                                    /*
                                        v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式放回 truthy 值得时候被渲染。

                                             eg:  <h1 v-if="awesome">Vue is awesome!</h1>


                                        也可以用  v-else 添加一个 "else"块：
                                        
                                             eg:
                                                  <h1 v-if="awesome">Vue is awesome!</h1>
                                                  <h1 v-else>Oh no</h1>
                                    */  
                                    

                                // ★一、在<template>元素上使用 v-if 条件渲染分组
                                    
                                        /*
                                            因为 v-if 是一个指令，所以必须将它添加到一个元素上。
                                            但是如果想切换多个元素呢？ 此时可以把一个<template>元素当做不可见的"包裹元素"，并在上面使用 v-if。最终的渲染结果将不包含<template>元素。

                                                eg: <template v-if="ok">
                                                        <h1>Title</h1>
                                                        <p>Paragraph 1</p>
                                                        <p>Paragraph 2</p>
                                                    </template>
                                        */
        </script>
    </body>
</Html>